<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../css/detail_common.css">
    <style>
        /*下拉刷新与上拉加载相关*/
        
        .mui-bar~.mui-content .mui-fullscreen {
            top: 44px;
            height: auto;
        }
        
        .mui-pull-top-tips {
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -25px;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            z-index: 1;
        }
        
        .mui-bar~.mui-pull-top-tips {
            top: 24px;
        }
        
        .mui-pull-top-wrapper {
            width: 42px;
            height: 42px;
            display: block;
            text-align: center;
            background-color: #efeff4;
            border: 1px solid #ddd;
            border-radius: 25px;
            background-clip: padding-box;
            box-shadow: 0 4px 10px #bbb;
            overflow: hidden;
        }
        
        .mui-pull-top-tips.mui-transitioning {
            -webkit-transition-duration: 200ms;
            transition-duration: 200ms;
        }
        
        .mui-pull-top-tips .mui-pull-loading {
            /*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
            margin: 0;
        }
        
        .mui-pull-top-wrapper .mui-icon,
        .mui-pull-top-wrapper .mui-spinner {
            margin-top: 7px;
        }
        
        .mui-pull-bottom-tips {
            text-align: center;
            background-color: #f2f5f8;
            font-size: 15px;
            line-height: 40px;
            color: #777;
        }
        
        .mui-pull-top-canvas {
            overflow: hidden;
            background-color: #fafafa;
            border-radius: 40px;
            box-shadow: 0 4px 10px #bbb;
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }
        
        .mui-pull-top-canvas canvas {
            width: 40px;
        }
        
        .mui-slider-indicator.mui-segmented-control {
            background-color: #f2f5f8;
        }
        /*下拉刷新与上拉加载相关*/
        /*原生css重写*/
        
        .mui-segmented-control.mui-scroll-wrapper .mui-scroll {
            width: inherit;
            height: inherit;
            background-color: #f2f5f8;
        }
        
        .mui-segmented-control.mui-scroll-wrapper .mui-control-item {
            width: 50%;
        }
        
        .mui-control-content {
            height: inherit;
        }
        
        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            color: #498af7;
        }
        
        .mui-segmented-control .mui-control-item.mui-active,
        .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
            background-color: #498af7;
        }
        
        .mui-segmented-control .mui-control-item {
            border-color: #498af7;
            color: #498af7;
            font-weight: 200;
        }
        
        .mui-scroll-wrapper {
            background-color: #f2f5f8;
        }
        
        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
            color: #666666;
            font-weight: 400;
        }
        
        .mui-slider .mui-slider-group .mui-slider-item img {
            width: 110px;
            height: 80px;
        }
        
        .mui-fullscreen .mui-segmented-control~.mui-slider-group {
            top: 50px;
        }
        
        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
            height: inherit;
            line-height: 50px;
        }
        
        .mui-segmented-control.mui-scroll-wrapper {
            height: 50px;
        }
        
        .mui-slider .mui-slider-group {
            font-size: 14px;
        }
        /*原生css重写*/
        
        .tab-container {
            height: 100%;
            padding-bottom: 50px;
        }
        
        .flex-cell-cloumn {
            display: flex;
            flex-direction: column;
        }
        
        .flex-cell-row {
            display: flex;
            flex-direction: row;
        }
        
        .content-title {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            font-weight: 500;
            font-size: 16px;
        }
        
        .content-details {
            font-size: 15px;
            font-weight: 300;
            color: #666666;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        
        .infoMain-item {
            justify-content: space-between;
        }
        
        .infoSec-item {
            justify-content: space-between;
        }
        
        .faultInfo-item {
            margin-left: 20px;
            flex-shrink: 1;
        }
        
        .fault-content-item {
            margin-top: 5px;
        }
        
        .info-item-container {
            color: #999999;
        }
        
        .info-name {
            color: #333333;
        }
        
        .header-img img {
            width: 100px;
            height: 80px;
            background-size: 100% 100%;
        }
        /*侧滑导航*/
        
        .offset-menu-title {
            color: #fff;
            line-height: 40px;
            font-size: 18px;
            font-weight: normal;
            text-indent: 15px;
        }
        
        #offset-menu-list .mui-table-view-cell {
            padding-left: 15px;
            background-color: #333;
            color: #fff;
        }
        
        #offset-menu-list .mui-table-view-cell.active-item,
        #offset-menu-list .mui-table-view-cell:active {
            background-color: #ccc;
            color: #333;
        }
        
        .mui-off-canvas-left {
            color: #fff;
        }
        
        .mui-slider {
            background: #fff;
        }
        
        .left-nav-wrapper {
            background-color: #333;
        }
        /*侧滑导航*/
        
        .no-msg {
            width: 100px;
            /*height: 85vh;*/
            margin: 100px auto;
        }
        
    </style>
</head>

<body>
    <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
        <!--侧滑菜单部分-->
        <aside id="offCanvasSide" class="mui-off-canvas-right">
            <div id="offCanvasSideScroll" class="mui-scroll-wrapper left-nav-wrapper">
                <div class="mui-scroll" id="offset-menu-list">
                    <h2 class="offset-menu-title">医院科室列表</h2>
                    <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted my-offnav">
                    </ul>
                </div>
            </div>
        </aside>
        <div class="mui-inner-wrap">
            <header class="mui-bar mui-bar-nav my-nav">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
                <h1 class="mui-title">故障管理</h1>
                <a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
            </header>
            <div class="mui-content">
                <div class="mui-slider mui-fullscreen" id="slider">
                    <!-- 顶部导航栏 -->
                    <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                        <div class="mui-scroll">
                            <a class="mui-control-item mui-active" href="#item1mobile">
							所有故障
					</a>
                            <a class="mui-control-item" href="#item2mobile">
							我的故障
					</a>
                        </div>
                    </div>
                    <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
                    <div class="mui-slider-group">
                        <!-- 所有故障 -->
                        <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">

                            <div style="padding: 10px 40px;background-color:#f2f5f8;">
                                <div id="segmentedControl01" class="mui-segmented-control">
                                    <a style="line-height: 30px;" class="mui-control-item mui-active" href="#item1">待确认</a>
                                    <a style="line-height: 30px;" class="mui-control-item" href="#item2">已确认</a>
                                    <a style="line-height: 30px;" class="mui-control-item" href="#item3">已修复</a>
                                    <a style="line-height: 30px;" class="mui-control-item" href="#item4">已取消</a>
                                </div>
                            </div>

                            <div class="tab-container">
                                <!-- 待确认 -->
                                <div id="item1" class="mui-control-content mui-active">
                                    <div id="scroll" class="mui-scroll-wrapper">
                                        <div class="mui-scroll">
                                            <ul class="mui-table-view my-list">
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- 已确认 -->
                                <div id="item2" class=" mui-control-content">
                                    <div id="scroll" class="mui-scroll-wrapper">
                                        <div class="mui-scroll">
                                            <ul class="mui-table-view my-list">
                                        
                                                    <div class="mui-loading">
                                                        <div class="mui-spinner">
                                                        </div>
                                                    </div>
                                                
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- 已修复 -->
                                <div id="item3" class="mui-control-content">
                                    <div id="scroll" class="mui-scroll-wrapper">
                                        <div class="mui-scroll">
                                            <ul class="mui-table-view my-list">
                                                <div class="mui-loading">
                                                    <div class="mui-spinner">
                                                    </div>
                                                </div>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- 已取消 -->
                                <div id="item4" class="mui-control-content">
                                    <div id="scroll" class="mui-scroll-wrapper">
                                        <div class="mui-scroll">
                                            <ul class="mui-table-view my-list">
                                                <div class="mui-loading">
                                                    <div class="mui-spinner">
                                                    </div>
                                                </div>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- 我的故障 -->
                        <div id="item2mobile" style="left: -4px;" class="mui-slider-item mui-control-content">

                            <div style="padding: 10px 40px;background-color:#f2f5f8;">
                                <div id="segmentedControl02" class="mui-segmented-control">
                                    <a style="line-height: 30px;" class="mui-control-item mui-active" href="#item11">待确认</a>
                                    <a style="line-height: 30px;" class="mui-control-item" href="#item22">已确认</a>
                                    <a style="line-height: 30px;" class="mui-control-item" href="#item33">已修复</a>
                                    <a style="line-height: 30px;" class="mui-control-item" href="#item44">已取消</a>
                                </div>
                            </div>
                            <div class="tab-container">
                                <!-- 待确认 -->
                                <div id="item11" class="mui-control-content mui-active">
                                    <div id="scroll" class="mui-scroll-wrapper">
                                        <div class="mui-scroll">
                                            <ul class="mui-table-view my-mui-table-view2 my-list">
                                                <!-- <li class="mui-table-view-cell">

													<div class="fault-cell flex-cell-cloumn">
														<div class="fault-item-container flex-cell-row">
															<div class="header-img">
																<img src="../../images/dhImages/shuijiao.jpg" alt="">
															</div>
															<div class="faultInfo-item">
																<div class="fault-title-item content-title">B超机不能扫描</div>
																<div class="fault-content-item content-details">电源部分正常，扫描抢也正常，但是扫描图像没有显示，超急！电源部分正常，扫描抢也正常，但是扫描图像没有显示，超急！电源部分正常，扫描抢也正常，但是扫描图像没有显示，超急！电源部分正常，扫描抢也正常，但是扫描图像没有显示，超急！电源部分正常，扫描抢也正常，但是扫描图像没有显示，超急！</div>
															</div>
														</div>
														<div class="info-item-container flex-cell-cloumn">
															<div class="infoMain-item flex-cell-row">
																<div class="info-name">李医生</div>
																<div><span>设备名称: B超机</span><span> 设备类型: 大型设备</span></div>
															</div>
															<div class="infoSec-item flex-cell-row">
																<div>科室:内科</div>
																<div>03/08 13:47:28</div>
															</div>
														</div>
													</div>

												</li> -->

                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- 已确认 -->
                                <div id="item22" class=" mui-control-content">
                                    <div id="scroll" class="mui-scroll-wrapper">
                                        <div class="mui-scroll">
                                            <ul class="mui-table-view my-list">
                                                <div class="mui-loading">
                                                    <div class="mui-spinner">
                                                    </div>
                                                </div>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- 已修复 -->
                                <div id="item33" class="mui-control-content">
                                    <div id="scroll" class="mui-scroll-wrapper">
                                        <div class="mui-scroll">
                                            <ul class="mui-table-view my-list">
                                                <div class="mui-loading">
                                                    <div class="mui-spinner">
                                                    </div>
                                                </div>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- 已取消 -->
                                <div id="item44" class="mui-control-content">
                                    <div id="scroll" class="mui-scroll-wrapper">
                                        <div class="mui-scroll">
                                            <ul class="mui-table-view my-list">
                                                <div class="mui-loading">
                                                    <div class="mui-spinner">
                                                    </div>
                                                </div>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
            <!-- off-canvas backdrop -->
            <div class="mui-off-canvas-backdrop"></div>
        </div>
    </div>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/mui.pullToRefresh.js"></script>
    <script src="../../js/mui.pullToRefresh.material.js"></script>
    <script src="../../js/md5.min.js" charset="utf-8"></script>
    <script src="../../js/imgload.js" charset="utf-8"></script>
    <script type="text/javascript">
        mui.init({
            swipeBack: false
        });
        (function($) {
            $('.mui-scroll-wrapper').scroll({
                indicators: true //是否显示滚动条
            });

            var deceleration = mui.os.ios ? 0.003 : 0.0009;
            $('.mui-scroll-wrapper').scroll({
                bounce: false,
                indicators: true, //是否显示滚动条
                deceleration: deceleration
            });
            $.plusReady(function() {
                var upTime = 0; // 上拉次数记录
                var data_length = 0; // 初始加载数据长度
                var types = {};
                var currentDepartmentId = '11';

                types[plus.networkinfo.CONNECTION_UNKNOW] = "网络连接状态未知";
                types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
                types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
                types[plus.networkinfo.CONNECTION_WIFI] = "WIFI";
                types[plus.networkinfo.CONNECTION_CELL2G] = "2G";
                types[plus.networkinfo.CONNECTION_CELL3G] = "3G";
                types[plus.networkinfo.CONNECTION_CELL4G] = "4G";
                console.log("Network: " + types[plus.networkinfo.getCurrentType()]);
                // 所有故障初始加载
                mui.ajax("https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=fault&a=getFaultList&hospitalid=10&departmentid=" + currentDepartmentId + "&uid=3&token=dfaf&limit=20&state=1", {
                    dataType: 'json',
                    type: 'get',
                    beforeSend: function() {
                        // 判断当前是否联网
                        console.log("无网络状态0");
                        if (types[plus.networkinfo.getCurrentType()] === "未连接网络") {
                            // 没有联网则访问本地缓存数据
                            console.log("无网络状态1");
                            var fault_listData = plus.storage.getItem("fault_listData");
                            if (fault_listData) {
                                console.log("已在无网络状态加载缓存信息");
                                var fault_list = JSON.parse(fault_listData);

                                data_length = fault_list.length > 20 ? 20 : fault_list.length;
                                var ul = document.querySelector('.my-list');
                                ul.appendChild(createLi(ul, null, fault_list.length < 20 ? fault_list.length : 20, fault_list));

                            } else {
                                mui.alert("网络好像有点小问题~");
                            }
                            // 终止ajax请求
                            return false;
                        }
                    },
                    success: function(data) {
                        var fault_list = data.data;
                        data_length = fault_list.length > 20 ? 20 : fault_list.length;
                        var ul = document.querySelector('.my-list');
                        ul.appendChild(createLi(ul, null, fault_list.length < 20 ? fault_list.length : 20, fault_list));
                        // 数据请求成功之后更新本地缓存中的内容
                        console.log("已完成缓存数据");
                        plus.storage.setItem("fault_listData", JSON.stringify(fault_list));
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
                // 我的故障初始加载
                mui.ajax("https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=fault&a=getMyFaultList&hospitalid=10&departmentid=" + currentDepartmentId + "&uid=3&token=dfaf&limit=20&state=1", {
                    dataType: 'json',
                    type: 'get',
                    beforeSend: function() {
                        if (types[plus.networkinfo.getCurrentType()] === "未连接网络") {
                            // 没有联网则访问本地缓存数据
                            console.log("无网络状态1");
                            var myFault_listData = plus.storage.getItem("myFault_listData");
                            if (myFault_listData) {
                                console.log("已在无网络状态加载缓存信息");
                                var fault_list = JSON.parse(myFault_listData);

                                data_length = fault_list.length > 20 ? 20 : fault_list.length;
                                var ul = document.querySelector('.my-mui-table-view2');
                                ul.appendChild(createLi(ul, null, fault_list.length < 20 ? fault_list.length : 20, fault_list));
                            } else {
                                mui.alert("网络好像有点小问题~");
                            }
                            // 终止ajax请求
                            return false;
                        }
                    },
                    success: function(data) {
                        var fault_list = data.data;
                        data_length = fault_list.length > 20 ? 20 : fault_list.length;
                        var ul = document.querySelector('.my-mui-table-view2');
                        ul.appendChild(createLi(ul, null, fault_list.length < 20 ? fault_list.length : 20, fault_list));
                        plus.storage.setItem("myFault_listData", JSON.stringify(fault_list));
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
                // 循环初始化所有下拉刷新，上拉加载。
                // 所有故障上下拉部分
                $.each(document.querySelectorAll('#item1mobile .mui-scroll'), function(index, pullRefreshEl) {
                    $(pullRefreshEl).pullToRefresh({
                        // 下拉刷新
                        down: {
                            callback: function() {
                                var self = this;
                                setTimeout(function() {
                                    mui.ajax("https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=fault&a=getFaultList&hospitalid=10&departmentid=" + currentDepartmentId + "&uid=3&token=dfaf&limit=20&state=" + (index + 1), {
                                        dataType: 'json',
                                        type: 'get',
                                        success: function(data) {

                                            console.log("当前index: " + index);
                                            var fault_list = data.data;
                                            data_length = fault_list.length > 20 ? 20 : fault_list.length;
                                            upTime = 0;
                                            if (fault_list.length != 0) {
                                                mui.toast('数据成功加载', {
                                                    duration: 'short',
                                                    type: 'div'
                                                });
                                            } else {
                                                mui.toast('暂时没有相关记录', {
                                                    duration: 'short',
                                                    type: 'div'
                                                });
                                            }
                                            var ul = self.element.querySelector('.my-list');
                                            if (ul) {
                                                var new_ul = document.createElement("ul");
                                                ul.parentNode.replaceChild(new_ul, ul);
                                                new_ul.className = "mui-table-view";
                                                new_ul.appendChild(createLi(ul, index, fault_list.length < 20 ? fault_list.length : 20, fault_list));
                                                
                                            } else {
                                                var ul_wrap = document.querySelectorAll('.mui-scroll')[index+2];
                                                var new_ul = document.createElement("ul");
                                                new_ul.appendChild(createLi(ul, index, fault_list.length < 20 ? fault_list.length : 20, fault_list));
                                                ul_wrap.appendChild(new_ul);
                                                
                                            }
                                           self.endPullDownToRefresh();
                                        },
                                        error: function(error) {
                                            console.log(error);
                                            mui.toast('网络加载错误', {
                                                duration: 'short',
                                                type: 'div'
                                            });
                                            self.endPullDownToRefresh();
                                        }
                                    });
                                }, 400);
                            }
                        },
                        // 上拉加载
                        up: {
                            callback: function() {
                                var self = this;
                                setTimeout(function() {
                                    var ul = self.element.querySelector('.mui-table-view');
                                    var skipLi = upTime * 5 + data_length;
                                    mui.ajax("https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=fault&a=getFaultList&hospitalid=10&departmentid=" + currentDepartmentId + "&uid=3&token=dfaf&limit=5&skip=" + skipLi + "&state=" + (index + 1), {
                                        dataType: 'json', //服务器返回json格式数据
                                        type: 'get', //HTTP请求类型
                                        success: function(data) {
                                            //获得服务器响应
                                            var fault_list = data.data;
                                            console.log("当前index: " + index);
                                            if (fault_list.length !== 0) {
                                                console.log("fault_list.length:" + fault_list.length);
                                                var ul = self.element.querySelector('.my-list');
                                                if (ul) {
                                                    ul.appendChild(createLi(ul, index, 5, fault_list));
                                                    upTime++;
                                                    console.log("成功加载次数:" + upTime);
                                                } else {
                                                    var ul_wrap = document.querySelectorAll('.mui-scroll')[index + 2];
                                                    var new_ul = ul_wrap.querySelector('ul');
                                                    new_ul.appendChild(createLi(ul, index, 5, order_list));
                                                    upTime++;
                                        
                                                }
                                                
                                            } else {
                                                mui.toast('没有可加载的数据了', {
                                                    duration: 'short',
                                                    type: 'div'
                                                });
                                                console.log("已加载次数:" + upTime);
                                                
                                            }
                                            self.endPullUpToRefresh();
                                        },
                                        error: function(err) {
                                            console.log(err);
                                            mui.toast('网络加载错误', {
                                                duration: 'short',
                                                type: 'div'
                                            });
                                            self.endPullUpToRefresh();
                                        }
                                    });
                                }, 400);
                            }
                        }
                    });
                });
                // 我的故障上下拉部分
                $.each(document.querySelectorAll('#item2mobile .mui-scroll'), function(index, pullRefreshEl) {
                    $(pullRefreshEl).pullToRefresh({
                        // 下拉刷新
                        down: {
                            callback: function() {
                                var self = this;
                                setTimeout(function() {
                                    mui.ajax("https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=fault&a=getMyFaultList&hospitalid=10&departmentid=" + currentDepartmentId + "&uid=3&token=dfaf&limit=20&state=" + (index + 1), {
                                        dataType: 'json',
                                        type: 'get',
                                        success: function(data) {

                                            console.log("当前index: " + index);
                                            var fault_list = data.data;
                                            data_length = fault_list.length > 20 ? 20 : fault_list.length;
                                            upTime = 0;
                                            if (fault_list.length != 0) {
                                                mui.toast('数据成功加载', {
                                                    duration: 'short',
                                                    type: 'div'
                                                });
                                            } else {
                                                mui.toast('暂时没有相关记录', {
                                                    duration: 'short',
                                                    type: 'div'
                                                });
                                            }

                                            var ul = self.element.querySelector('.my-list');
                                            if (ul) {
                                                var new_ul = document.createElement("ul");
                                                ul.parentNode.replaceChild(new_ul, ul);
                                                new_ul.className = "mui-table-view my-list";
                                                new_ul.appendChild(createLi(ul, index, fault_list.length < 20 ? fault_list.length : 20, fault_list));
                                                self.endPullDownToRefresh();
                                            } else {
                                                var ul_wrap = document.querySelectorAll('.mui-scroll')[index + 4];
                                                var new_ul = document.createElement("ul");
                                                new_ul.appendChild(createLi(ul, index, fault_list.length < 20 ? fault_list.length : 20, fault_list));
                                                ul_wrap.appendChild(new_ul);
                                                self.endPullDownToRefresh();
                                            }
                                            
                                        },
                                        error: function(error) {
                                            console.log(error);
                                            mui.toast('网络加载错误', {
                                                duration: 'short',
                                                type: 'div'
                                            });
                                            self.endPullDownToRefresh();
                                        }
                                    });
                                }, 400);
                            }
                        },
                        // 上拉加载
                        up: {
                            callback: function() {
                                var self = this;
                                setTimeout(function() {
                                    var ul = self.element.querySelector('.my-list');
                                    var skipLi = upTime * 5 + data_length;
                                    mui.ajax("https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=fault&a=getMyFaultList&hospitalid=10&departmentid=" + currentDepartmentId + "&uid=3&token=dfaf&limit=5&skip=" + skipLi + "&state=" + (index + 1), {
                                        dataType: 'json', //服务器返回json格式数据
                                        type: 'get', //HTTP请求类型
                                        success: function(data) {
                                            //获得服务器响应
                                            var fault_list = data.data;
                                            console.log("当前index: " + index);
                                            if (fault_list.length != 0) {
                                                console.log("fault_list.length:" + fault_list.length);
                                                var ul = self.element.querySelector('.my-list');
                                                console.log(ul);
                                                ul.appendChild(createLi(ul, index, 5, fault_list));
                                                console.log("ok");
                                                upTime++;
                                                console.log("成功加载次数:" + upTime);
                                                self.endPullUpToRefresh();
                                            } else {
                                                mui.toast('没有可加载的数据了', {
                                                    duration: 'short',
                                                    type: 'div'
                                                });
                                                console.log("已加载次数:" + upTime);
                                                self.endPullUpToRefresh();
                                            }
                                        },
                                        error: function(err) {
                                            console.log(err);
                                            mui.toast('网络加载错误', {
                                                duration: 'short',
                                                type: 'div'
                                            });
                                            self.endPullUpToRefresh();
                                        }
                                    });
                                }, 400);
                            }
                        }
                    });
                });
                // tap tab切换
                var item1 = document.getElementById("item1mobile");
                var i1 = document.getElementById("item1");
                var i2 = document.getElementById("item2");
                var i3 = document.getElementById("item3");
                var i4 = document.getElementById("item4");
                document.getElementById('segmentedControl01').addEventListener('tap', function(e) {
                        console.log(e.target.text);
                        if (e.target.text === "待确认") {
                            if (i1.querySelector('.mui-loading')) {
                                fetchDataByState(i1, currentDepartmentId, 1);
                            }
                        } else if (e.target.text === "已确认") {
                            if (i2.querySelector('.mui-loading')) {
                                fetchDataByState(i2, currentDepartmentId, 2);
                            }
                        } else if (e.target.text === "已修复") {
                            if (i3.querySelector('.mui-loading')) {
                                fetchDataByState(i3, currentDepartmentId, 3);
                            }
                        } else if (e.target.text === "已取消") {
                            if (i4.querySelector('.mui-loading')) {
                                fetchDataByState(i4, currentDepartmentId, 4);
                            }
                        }
                    })
                    // slide tab切换 我的故障
                    // html2 = "<h1>item2</h1>";
                    // var item1 = document.getElementById('item1mobile');
                var item2 = document.getElementById('item2mobile');
                var i11 = document.getElementById("item11");
                var i22 = document.getElementById("item22");
                var i33 = document.getElementById("item33");
                var i44 = document.getElementById("item44");
                document.getElementById('slider').addEventListener('slide', function(e) {
                    if (e.detail.slideNumber === 1) {
                        console.log("我的故障");
                        document.getElementById('segmentedControl02').addEventListener('tap', function(e) {
                            console.log(e.target.text);
                            if (e.target.text === "待确认") {
                                if (i11.querySelector('.mui-loading')) {
                                    fetchDataByState(i11, currentDepartmentId, 1);
                                }
                            } else if (e.target.text === "已确认") {
                                if (i22.querySelector('.mui-loading')) {
                                    fetchDataByState(i22, currentDepartmentId, 2);
                                }
                            } else if (e.target.text === "已修复") {
                                if (i33.querySelector('.mui-loading')) {
                                    fetchDataByState(i33, currentDepartmentId, 3);
                                }
                            } else if (e.target.text === "已取消") {
                                if (i44.querySelector('.mui-loading')) {
                                    fetchDataByState(i44, currentDepartmentId, 4);
                                }
                            }
                        })

                    }
                });
                var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
                $('.mui-input-group').on('change', 'input', function() {
                    if (this.checked) {
                        sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
                        //force repaint
                        sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
                    }
                });
                // 渲染侧滑菜单
                var urlPrefix = "https://bird.ioliu.cn/v1?url=";
                mui.ajax(urlPrefix + "http://app.xiaoweicanting.com/hospital.php?m=App&c=index&a=getDepartmentList&hospitalid=10&uid=3&token=dfaf", {
                    async: true,
                    type: "GET",
                    dataType: "json",
                    beforeSend: function() {
                        if (types[plus.networkinfo.getCurrentType()] === "未连接网络") {
                            var departmentList = plus.storage.getItem("department_list_in_equipment_manage");
                            if (departmentList) {
                                var data = JSON.parse(departmentList);
                                var left_nav = document.querySelector('.my-offnav');
                                left_nav.appendChild(createNavLi(left_nav, data));
                            }
                            return false;
                        }
                    },
                    success: function(data, textStatus) {
                        if (textStatus === "success") {
                            var data = data.data;
                            if (data.length) {
                                var left_nav = document.querySelector('.my-offnav');
                                left_nav.appendChild(createNavLi(left_nav, data));
                                plus.storage.setItem("department_list_in_equipment_manage", JSON.stringify(data));
                            }
                        }
                    }
                });
            })
        })(mui);

        function createLi(ul, index, count, data) {
            var fragment = document.createDocumentFragment();
            var li;

            for (var i = 0; i < count; i++) {

                li = document.createElement('li');
                li.className = 'mui-table-view-cell';
                li.innerHTML = "<div class=\"fault-cell flex-cell-cloumn\"><div class=\"fault-item-container flex-cell-row\"><div class=\"header-img\"><img src=\"../../images/test/timg.jpeg\" data-src=\"http://app.xiaoweicanting.com/" + data[i].equipmentpic +
                    "\" alt=\"\" onload=\"load(this)\"></div><div class=\"faultInfo-item\"><div class=\"fault-title-item content-title\">" + data[i].title + "</div><div class=\"fault-content-item content-details\">" + data[i].content +
                    "</div></div></div><div class=\"info-item-container flex-cell-cloumn\"><div class=\"infoMain-item flex-cell-row\"><div class=\"info-name\">" + data[i].addname + "</div><div><span>设备名称: " + data[i].equipmentname + "</span><span> 设备类型: " + data[
                        i].equipmenttype + "</span></div></div><div class=\"infoSec-item flex-cell-row\"><div>科室: " + data[i].departmentname + "</div><div>" + data[i].addtime + "</div></div></div></div>"


                li.id = data[i].sid;

                li.addEventListener('tap', function() {
                    mui.openWindow({
                        url: 'management_detail.html?id=' + this.id,
                        id: 'management'
                    });
                });
                fragment.appendChild(li);
            }
            return fragment;
        };
        // 侧滑菜单
        function createNavLi(ul, data) {
            var fragment = document.createDocumentFragment();
            for (var i = 0; i < data.length; i++) {
                var li = document.createElement('li');
                li.className = "mui-table-view-cell";
                li.setAttribute('data-departmentid', data[i].id);
                li.setAttribute('data-departmentName', data[i].name);
                li.innerHTML = "<a class=\"mui-navigate-right\">" + data[i].name + "</a>"

                li.addEventListener('tap', function() {
                    var self = this;
                    currentDepartmentId = self.getAttribute("data-departmentid");
                    mui('.mui-off-canvas-wrap').offCanvas().close();
                    mui('.mui-title')[0].innerText = "故障管理-" + self.getAttribute("data-departmentName");
                    // pageRefresh();
                    fetchData("all", 1, currentDepartmentId, 10, function (html) {
                        var item1 = document.getElementById("item1");
                        if (html) {
                            item1.querySelector(".mui-scroll").innerHTML = html;
                        } else {
                            item1.querySelector(".mui-scroll").innerHTML = "<p class=\"no-msg\">暂时没有数据</p>";
                        }
                    })
                    fetchData("my", 1, currentDepartmentId, 10, function (html) {
                        var item11 = document.getElementById("item11");
                        if (html) {
                            item11.querySelector(".mui-scroll").innerHTML = html;
                        } else {
                            item11.querySelector(".mui-scroll").innerHTML = "<p class=\"no-msg\">暂时没有数据</p>";
                        }
                    })
                    console.log(currentDepartmentId);

                })

                fragment.appendChild(li);
            }
            return fragment;
        }

        function fetchDataByState(item, departmentId, state) {
            mui.ajax("https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=fault&a=getMyFaultList&hospitalid=10&departmentid=" + departmentId + "&uid=3&token=dfaf&limit=20&state=" + state, {
                dataType: 'json',
                type: 'get',
                beforeSend: function() {
                    if (plus.networkinfo.getCurrentType() === 1) {
                        var listData = plus.storage.getItem(item + "_listData_" + state);
                        var data = JSON.parse(listData);
                        item.querySelector('.mui-loading').style.display = "none";
                        data_length = data.length > 20 ? 20 : data.length;
                        var ul = item.querySelector('.my-list');
                        if (ul.children.length <= 1) {
                            ul.appendChild(createLi(ul, null, fault_list.length < 20 ? fault_list.length : 20, fault_list));
                        }
                        return false;
                    }
                },
                success: function(data) {
                    item.querySelector('.mui-loading').style.display = "none";
                    var fault_list = data.data;
                    data_length = fault_list.length > 20 ? 20 : fault_list.length;
                    var ul = item.querySelector('.my-list');
                    var wrap = item.querySelector('.mui-scroll');
                    if (data_length !== 0) {
                        if (ul.children.length <= 1) {
                            ul.appendChild(createLi(ul, null, fault_list.length < 20 ? fault_list.length : 20, fault_list));
                        }
                        plus.storage.setItem(item + "_listData_" + state, JSON.stringify(fault_list));
                        console.log("fetchDataByState success 01");
                    } else {
                        wrap.innerHTML = "<p class=\"no-msg\">暂时没有数据</p>";
                        console.log("fetchDataByState success 02");
                    }
                    
                },
                error: function(error) {
                    console.log(error);
                }
            })
        }


        function fetchData(mainType, subType, departmentid, count, callback) {
            mui.ajax(mainType === "all" ? "https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=fault&a=getFaultList&hospitalid=10&departmentid=" + departmentid + "&uid=3&token=dfaf&limit=" + count + "&state=" + subType :
                "https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=fault&a=getMyFaultList&hospitalid=10&departmentid=" + departmentid + "&uid=3&token=dfaf&limit=" + count + "&state=" + subType, {
                    dataType: 'json',
                    type: 'get',
                    success: function(data) {
                        var data = data.data;
                        data_length = data.length;
                        if (data_length) {
                            var html = '<ul class="mui-table-view">';
                            for (var i = 0; i < data_length; i++) {
                                html += "<li class='mui-table-view-cell'><div class=\"fault-cell flex-cell-cloumn\"><div class=\"fault-item-container flex-cell-row\"><div class=\"header-img\"><img src=\"../../images/test/timg.jpeg\" data-src=\"http://app.xiaoweicanting.com/" + data[i].equipmentpic +
                                    "\" alt=\"\" onload=\"load(this)\"></div><div class=\"faultInfo-item\"><div class=\"fault-title-item content-title\">" + data[i].title + "</div><div class=\"fault-content-item content-details\">" + data[i].content +
                                    "</div></div></div><div class=\"info-item-container flex-cell-cloumn\"><div class=\"infoMain-item flex-cell-row\"><div class=\"info-name\">" + data[i].addname + "</div><div><span>设备名称: " + data[i].equipmentname + "</span><span> 设备类型: " + data[
                                        i].equipmenttype + "</span></div></div><div class=\"infoSec-item flex-cell-row\"><div>科室: " + data[i].departmentname + "</div><div>" + data[i].addtime + "</div></div></div></div></li>"
                            }
                            html += "</ul>";
                        }
                        callback(html);
                    }
                });
        }
    </script>
</body>

</html>